<div class="new-choose-city">
    <ion-header>
        <ion-toolbar style="--border-width: unset;">
            <ion-buttons slot="start" class="commonTitleText">选择所在区域</ion-buttons>
            <ion-buttons slot="end">
                <ion-button appDebounceClick (debounceClick)="doDiss()">
                    <img src="assets/img/close.png" class="backBtnStyle">
                </ion-button>
            </ion-buttons>
        </ion-toolbar>
    </ion-header>

    <div class="tab">
        <div class="tab_slideBox">
            <ng-container *ngFor="let item of data;let i = index">
               <span class="tab_title" appDebounceClick (debounceClick)="addressTitleBtn(item, i, data)" [ngClass]="{'active-color': item.active === true}" *ngIf="item.text">{{item.text}}</span>
            </ng-container>
            <span class="tab_text" appDebounceClick (debounceClick)="changeColor()" [ngClass]="{'choose-color': chooseColor === true}">{{chooseText}}</span>
        </div>
    </div>

    <ion-content>
        <ion-index-list [hasTop]="true" [hasPostion]="true">
            <div *ngFor="let group of groupAddress">
                <ion-index-section [newStyle]="true" [index]="group.l" *ngIf="(group.c|filter:key).length > 0">
                    <ion-index-cell [mSelect]="true" *ngFor="let city of group.c | filter:key; last as last">
                        <div class="city_item" appDebounceClick (debounceClick)="doClose(city)">
                            <span class="city_name">{{city?.n}}</span>
                        </div>
                    </ion-index-cell>
                </ion-index-section>
            </div>
        </ion-index-list>
    </ion-content>
</div>